<template>
  <f7-page bg-color="white">
    <f7-navbar title="注册" back-link="返回"></f7-navbar>
    <f7-list form>
      <form class="list">
        <ul>
          <li class="item-content item-input item-input-with-info">
            <div class="item-inner">
              <div class="item-title item-label">用户名</div>
              <div class="item-input-wrap float-left">
                <input type="text" name="name" placeholder="name" v-model="username">
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input item-input-with-info">
            <div class="item-inner">
              <div class="item-title item-label">手机号</div>
              <div class="item-input-wrap float-left" style="width:70%;">
                <input type="text" name="name" placeholder="phone" v-model="phone">
                <!-- <span class="input-clear-button"></span> -->
              </div>
              <f7-button class="float-right" style="width:30%;" @click="getCode()">获取验证码</f7-button>
            </div>
          </li>
          <li class="item-content item-input item-input-with-info">
            <div class="item-inner">
              <div class="item-title item-label">验证码</div>
              <div class="item-input-wrap">
                <input type="text" name="name" placeholder="code" v-model="verify_code">
                <span class="input-clear-button"></span>
                <!-- <div class="item-input-info">Some information about input field</div> -->
              </div>
            </div>
          </li>
        </ul>
      </form>
    </f7-list>
    <f7-block>
      <f7-button big fill @click="goNext()">下一步</f7-button>
    </f7-block>
  </f7-page>
</template>

<script>
import utilsCommon from '../../utils/common'
export default {
  data () {
    return {
      username: '',
      phone: '',
      verify_code: ''
    }
  },
  methods: {
    async getCode () {
      let getCodeRep = await this.AccountService.getCode({ phone: this.phone })
      if (getCodeRep.data.status === 'success') {
        let param = {
          code: utilsCommon.md5Fun(getCodeRep.data.data.code, 2, 8),
          phone: this.phone,
          package_name: process.env.VUE_APP_PACKAGE
        }
        let getVerifyCodeRep = await this.AccountService.getVerifyCode(param)
        if (getVerifyCodeRep.data.status === 'success') {
          this.verify_code = getVerifyCodeRep.data.data.code
        }
      }
    },
    async goNext () {
      let param = {
        package_name: process.env.VUE_APP_PACKAGE,
        phone: this.phone,
        real_name: this.username,
        type: 'TRAFFIC',
        verify_code: this.verify_code
      }
      let goNexRep = await this.AccountService.signup(param)
      if (goNexRep.data.status === 'success') {
        this.$f7.router.navigate({ url: '/reg_next/' })
      }
    }
  }
}
</script>

<style scoped>
.ios .list {
  margin: 0;
}
</style>
